<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getAdvertPositionDetail } from '@/api/advertPosition/admin'
import { ContentWrap } from '@/components/ContentWrap'
import type { AdvertPositionItem } from '@/api/advertPosition/types'

// 路由和路由参数
const route = useRoute()
const router = useRouter()

// 广告位详情数据
const advertPositionDetail = ref<AdvertPositionItem | { 
  id: number
  name: string
  title: string
  sizeInfo: string
  status: number
  createdAt: string
  updatedAt: string
  delFlag: number
} | null>(null)
const loading = ref(false)

// 获取广告位详情
const fetchAdvertPositionDetail = async () => {
  try {
    loading.value = true
    const id = route.params.id as string
    const response = await getAdvertPositionDetail(Number(id))
    
    if (response.code === 200) {
      advertPositionDetail.value = response.data
    } else {
      ElMessage.error(response.message || '获取广告位详情失败')
    }
  } catch (error) {
    ElMessage.error('获取广告位详情失败')
  } finally {
    loading.value = false
  }
}

// 返回列表页
const goBack = () => {
  if (route.query.from === 'config') {
    router.push({ name: 'AdvertPositionConfig' })
  } else {
    router.push({ name: 'AdvertPositionPageList' })
  }
}

// 初始化
onMounted(() => {
  fetchAdvertPositionDetail()
})
</script>

<template>
  <ContentWrap title="广告位详情" message="查看广告位详细信息">
    <el-descriptions v-loading="loading" :column="1" border>
      <el-descriptions-item label="ID">{{ advertPositionDetail?.id }}</el-descriptions-item>
      <el-descriptions-item label="广告位名称">{{ advertPositionDetail?.name }}</el-descriptions-item>
      <el-descriptions-item label="广告位标题">{{ advertPositionDetail?.title }}</el-descriptions-item>
      <el-descriptions-item label="尺寸信息">{{ advertPositionDetail?.sizeInfo }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="advertPositionDetail?.status === 1 ? 'success' : 'danger'">
          {{ advertPositionDetail?.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ advertPositionDetail?.createdAt }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ advertPositionDetail?.updatedAt }}</el-descriptions-item>
    </el-descriptions>
    
    <div class="footer">
      <el-button @click="goBack">返回</el-button>
    </div>
  </ContentWrap>
</template>

<style scoped>
.footer {
  margin-top: 20px;
  text-align: center;
}
</style>